<template>
  <div class="xiaohongshu-container">
    <!-- 分类导航和搜索框 -->
    <div class="category-nav">
      <div class="category-items">
        <div v-for="(category, index) in categories" :key="index" class="category-item"
          :class="{ active: activeCategory === category.value }" @click="activeCategory = category.value">
          {{ category.label }}
        </div>
      </div>

      <!-- 搜索框放在分类导航栏右侧 -->
      <div class="nav-search-container">
        <el-input placeholder="搜索内容" prefix-icon="el-icon-search" v-model="searchKeyword"
          @keyup.enter.native="handleSearch" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch" size="small"></el-button>
        </el-input>
      </div>
    </div>

    <!-- 笔记瀑布流 -->
    <div class="notes-waterfall">
      <div v-for="(note, index) in displayedNotes" :key="index" class="note-card" @click="openArticleDetail(note)">
        <div class="note-cover">
          <img :src="note.coverImg" alt="笔记封面">
          <div class="note-video-icon" v-if="note.isVideo">
            <i class="el-icon-video-play"></i>
          </div>
        </div>
        <div class="note-content">
          <div class="note-title">{{ note.title }}</div>
          <div class="note-author">
            <el-avatar :size="20" :src="note.authorAvatar"></el-avatar>
            <span class="author-name">{{ note.authorName }}</span>
            <span class="like-count"><i class="el-icon-star-on"></i> {{ note.likeCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <i class="el-icon-loading"></i>
      <span>加载中...</span>
    </div>

    <!-- 全部加载完毕提示 -->
    <div v-if="noMore" class="no-more">
      <span>没有更多内容了~</span>
    </div>

    <!-- 自定义文章详情弹窗 -->
    <div class="article-popup-overlay" v-if="detailVisible" @click="closeArticleDetail">
      <div class="article-popup-container" @click.stop>
        <div class="article-popup-content" v-if="currentArticle">
          <!-- 左侧图片区域 -->
          <div class="article-popup-images">
            <el-carousel 
              indicator-position="none" 
              height="100%" 
              arrow="always" 
              :autoplay="false"
              v-if="currentArticle.imageList && currentArticle.imageList.length > 0"
            >
              <el-carousel-item v-for="(img, index) in currentArticle.imageList" :key="index">
                <img :src="img" class="article-popup-image" alt="文章图片">
              </el-carousel-item>
            </el-carousel>
            <img v-else :src="currentArticle.coverImg" class="article-popup-image" alt="文章封面">
          </div>
          
          <!-- 右侧内容区域 -->
          <div class="article-popup-info">
            <!-- 作者信息 -->
            <div class="article-popup-author">
              <el-avatar :size="40" :src="currentArticle.authorAvatar"></el-avatar>
              <div class="author-info">
                <div class="author-name">{{ currentArticle.authorName }}</div>
                <div class="publish-time">{{ formatTime(currentArticle.publishTime) }}</div>
              </div>
              <el-button 
                size="small" 
                :type="isFollowing ? 'info' : 'danger'" 
                :class="{'is-following': isFollowing}"
                @click="toggleFollow"
              >
                {{ isFollowing ? '已关注' : '关注' }}
              </el-button>
            </div>
            
            <!-- 文章标题和内容 -->
            <div class="article-popup-main">
              <h2 class="article-popup-title">{{ currentArticle.title }}</h2>
              <div class="article-popup-text" v-html="formatContent(currentArticle.content)"></div>
            </div>
            
            <!-- 位置信息 -->
            <div class="article-popup-location" v-if="currentArticle.location">
              <i class="el-icon-location"></i>
              <span>{{ currentArticle.location }}</span>
            </div>
            
            <!-- 互动区域 -->
            <div class="article-popup-actions">
              <div class="action-bar">
                <span @click="toggleLike">
                  <svg class="icon-svg heart-icon" :class="{'liked': isLiked}" viewBox="0 0 24 24" width="22" height="22">
                    <path v-if="isLiked" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#ff2442"/>
                    <path v-else d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" fill="#333"/>
                  </svg>
                  {{ likeCount }}
                </span>
                <span @click="toggleCollect">
                  <svg class="icon-svg" :class="{'collected': isCollected}" viewBox="0 0 24 24" width="24" height="24">
                    <path v-if="isCollected" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#ff9c00"/>
                    <path v-else d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="#333"/>
                  </svg>
                  {{ isCollected ? '已收藏' : '18' }}
                </span>
                <span @click="focusComment">
                  <svg class="icon-svg comment-icon" viewBox="0 0 24 24" width="20" height="20">
                    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2z" fill="#333"/>
                  </svg>
                  {{ commentCount }}
                </span>
                <span @click="handleShare">
                  <svg class="icon-svg share-icon" viewBox="0 0 24 24" width="20" height="20">
                    <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" fill="#333"/>
                  </svg>
                  分享
                </span>
              </div>
            </div>
            
            <!-- 评论区域 -->
            <div class="article-popup-comments">
              <h3 class="comments-title">评论 ({{ commentCount }})</h3>
              
              <!-- 评论列表 -->
              <div class="comments-list" v-if="comments.length > 0">
                <div class="comment-item" v-for="(comment, index) in comments" :key="index">
                  <el-avatar :size="32" :src="comment.avatar"></el-avatar>
                  <div class="comment-content">
                    <div class="comment-user">{{ comment.username }}</div>
                    <div class="comment-text">{{ comment.content }}</div>
                    <div class="comment-info">
                      <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
                      <span class="comment-reply" @click="replyComment(comment)">回复</span>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                      <div class="reply-item" v-for="(reply, rIndex) in comment.replies" :key="rIndex">
                        <div class="reply-content">
                          <span class="reply-user">{{ reply.username }}</span>
                          <span v-if="reply.replyTo"> 回复 </span>
                          <span class="reply-to" v-if="reply.replyTo">@{{ reply.replyTo }}</span>
                          <span>: {{ reply.content }}</span>
                        </div>
                        <div class="reply-info">
                          <span class="reply-time">{{ formatTime(reply.createTime) }}</span>
                          <span class="reply-action" @click="replyComment(reply, comment)">回复</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 无评论提示 -->
              <div class="no-comments" v-else>
                <i class="el-icon-chat-dot-square"></i>
                <span>暂无评论，快来抢沙发吧~</span>
              </div>
              
              <!-- 评论输入框 -->
              <div class="comment-input">
                <div class="input-wrapper">
                  <el-input
                    v-model="commentText"
                    type="text"
                    placeholder="说点什么..."
                    resize="none"
                    ref="commentInput"
                  ></el-input>
                  
                  <!-- 互动按钮 -->
                  <div class="quick-actions">
                    <div class="quick-action-item" @click="toggleLike">
                      <svg class="icon-svg heart-icon" :class="{'liked': isLiked}" viewBox="0 0 24 24" width="22" height="22">
                        <path v-if="isLiked" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#ff2442"/>
                        <path v-else d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" fill="#333"/>
                      </svg>
                      <span>{{ likeCount }}</span>
                    </div>
                    <div class="quick-action-item" @click="toggleCollect">
                      <svg class="icon-svg" :class="{'collected': isCollected}" viewBox="0 0 24 24" width="24" height="24">
                        <path v-if="isCollected" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#ff9c00"/>
                        <path v-else d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="#333"/>
                      </svg>
                      <span>{{ isCollected ? '已收藏' : '18' }}</span>
                    </div>
                    <div class="quick-action-item" @click="focusComment">
                      <svg class="icon-svg comment-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2z" fill="#333"/>
                      </svg>
                      <span>{{ commentCount }}</span>
                    </div>
                    <div class="quick-action-item" @click="handleShare">
                      <svg class="icon-svg share-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" fill="#333"/>
                      </svg>
                      <span>分享</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <i class="el-icon-loading"></i>
      <span>加载中...</span>
    </div>

    <!-- 全部加载完毕提示 -->
    <div v-if="noMore" class="no-more">
      <span>没有更多内容了~</span>
    </div>

    <!-- 自定义文章详情弹窗 -->
    <div class="article-popup-overlay" v-if="detailVisible" @click="closeArticleDetail">
      <div class="article-popup-container" @click.stop>
        <div class="article-popup-content" v-if="currentArticle">
          <!-- 左侧图片区域 -->
          <div class="article-popup-images">
            <el-carousel 
              indicator-position="none" 
              height="100%" 
              arrow="always" 
              :autoplay="false"
              v-if="currentArticle.imageList && currentArticle.imageList.length > 0"
            >
              <el-carousel-item v-for="(img, index) in currentArticle.imageList" :key="index">
                <img :src="img" class="article-popup-image" alt="文章图片">
              </el-carousel-item>
            </el-carousel>
            <img v-else :src="currentArticle.coverImg" class="article-popup-image" alt="文章封面">
          </div>
          
          <!-- 右侧内容区域 -->
          <div class="article-popup-info">
            <!-- 作者信息 -->
            <div class="article-popup-author">
              <el-avatar :size="40" :src="currentArticle.authorAvatar"></el-avatar>
              <div class="author-info">
                <div class="author-name">{{ currentArticle.authorName }}</div>
                <div class="publish-time">{{ formatTime(currentArticle.publishTime) }}</div>
              </div>
              <el-button 
                size="small" 
                :type="isFollowing ? 'info' : 'danger'" 
                :class="{'is-following': isFollowing}"
                @click="toggleFollow"
              >
                {{ isFollowing ? '已关注' : '关注' }}
              </el-button>
            </div>
            
            <!-- 文章标题和内容 -->
            <div class="article-popup-main">
              <h2 class="article-popup-title">{{ currentArticle.title }}</h2>
              <div class="article-popup-text" v-html="formatContent(currentArticle.content)"></div>
            </div>
            
            <!-- 位置信息 -->
            <div class="article-popup-location" v-if="currentArticle.location">
              <i class="el-icon-location"></i>
              <span>{{ currentArticle.location }}</span>
            </div>
            
            <!-- 互动区域 -->
            <div class="article-popup-actions">
              <div class="action-bar">
                <span @click="toggleLike">
                  <svg class="icon-svg heart-icon" :class="{'liked': isLiked}" viewBox="0 0 24 24" width="22" height="22">
                    <path v-if="isLiked" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#ff2442"/>
                    <path v-else d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" fill="#333"/>
                  </svg>
                  {{ likeCount }}
                </span>
                <span @click="toggleCollect">
                  <svg class="icon-svg" :class="{'collected': isCollected}" viewBox="0 0 24 24" width="24" height="24">
                    <path v-if="isCollected" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#ff9c00"/>
                    <path v-else d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="#333"/>
                  </svg>
                  {{ isCollected ? '已收藏' : '18' }}
                </span>
                <span @click="focusComment">
                  <svg class="icon-svg comment-icon" viewBox="0 0 24 24" width="20" height="20">
                    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2z" fill="#333"/>
                  </svg>
                  {{ commentCount }}
                </span>
                <span @click="handleShare">
                  <svg class="icon-svg share-icon" viewBox="0 0 24 24" width="20" height="20">
                    <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" fill="#333"/>
                  </svg>
                  分享
                </span>
              </div>
            </div>
            
            <!-- 评论区域 -->
            <div class="article-popup-comments">
              <h3 class="comments-title">评论 ({{ commentCount }})</h3>
              
              <!-- 评论列表 -->
              <div class="comments-list" v-if="comments.length > 0">
                <div class="comment-item" v-for="(comment, index) in comments" :key="index">
                  <el-avatar :size="32" :src="comment.avatar"></el-avatar>
                  <div class="comment-content">
                    <div class="comment-user">{{ comment.username }}</div>
                    <div class="comment-text">{{ comment.content }}</div>
                    <div class="comment-info">
                      <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
                      <span class="comment-reply" @click="replyComment(comment)">回复</span>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                      <div class="reply-item" v-for="(reply, rIndex) in comment.replies" :key="rIndex">
                        <div class="reply-content">
                          <span class="reply-user">{{ reply.username }}</span>
                          <span v-if="reply.replyTo"> 回复 </span>
                          <span class="reply-to" v-if="reply.replyTo">@{{ reply.replyTo }}</span>
                          <span>: {{ reply.content }}</span>
                        </div>
                        <div class="reply-info">
                          <span class="reply-time">{{ formatTime(reply.createTime) }}</span>
                          <span class="reply-action" @click="replyComment(reply, comment)">回复</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 无评论提示 -->
              <div class="no-comments" v-else>
                <i class="el-icon-chat-dot-square"></i>
                <span>暂无评论，快来抢沙发吧~</span>
              </div>
              
              <!-- 评论输入框 -->
              <div class="comment-input">
                <div class="input-wrapper">
                  <el-input
                    v-model="commentText"
                    type="text"
                    placeholder="说点什么..."
                    resize="none"
                    ref="commentInput"
                  ></el-input>
                  
                  <!-- 互动按钮 -->
                  <div class="quick-actions">
                    <div class="quick-action-item" @click="toggleLike">
                      <svg class="icon-svg heart-icon" :class="{'liked': isLiked}" viewBox="0 0 24 24" width="22" height="22">
                        <path v-if="isLiked" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#ff2442"/>
                        <path v-else d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" fill="#333"/>
                      </svg>
                      <span>{{ likeCount }}</span>
                    </div>
                    <div class="quick-action-item" @click="toggleCollect">
                      <svg class="icon-svg" :class="{'collected': isCollected}" viewBox="0 0 24 24" width="24" height="24">
                        <path v-if="isCollected" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#ff9c00"/>
                        <path v-else d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="#333"/>
                      </svg>
                      <span>{{ isCollected ? '已收藏' : '18' }}</span>
                    </div>
                    <div class="quick-action-item" @click="focusComment">
                      <svg class="icon-svg comment-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2z" fill="#333"/>
                      </svg>
                      <span>{{ commentCount }}</span>
                    </div>
                    <div class="quick-action-item" @click="handleShare">
                      <svg class="icon-svg share-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" fill="#333"/>
                      </svg>
                      <span>分享</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getArticleList, searchArticles, getArticleDetail } from "@/api/xfs/home/home";

export default {
  name: 'home',
  data() {
    return {
      searchKeyword: '', // 搜索关键词
      activeCategory: 'recommend',
      categories: [
        { label: '推荐', value: 'recommend' },
        { label: '穿搭', value: 'fashion' },
        { label: '美食', value: 'food' },
        { label: '彩妆', value: 'makeup' },
        { label: '影视', value: 'movie' },
        { label: '职场', value: 'career' },
        { label: '情感', value: 'emotion' },
        { label: '家居', value: 'home' },
        { label: '游戏', value: 'game' },
        { label: '旅行', value: 'travel' },
        { label: '健身', value: 'fitness' }
      ],
      displayedNotes: [], // 当前显示的笔记
      pageSize: 15, // 每页加载数量
      currentPage: 1, // 当前页码
      loading: false, // 是否正在加载
      noMore: false, // 是否没有更多数据
      // 文章详情相关数据
      detailVisible: false,
      currentArticle: null,
      isFollowing: false,
      isLiked: false,
      isCollected: false,
      likeCount: 0,
      commentCount: 0,
      comments: [],
      commentText: '',
      replyingTo: null
    };
  },
  created() {
    this.init();
  },
  watch: {
    // 监听分类变化，重新加载数据
    activeCategory() {
      this.resetList();
      this.fetchData();
    }
  },
  mounted() {
    // 添加滚动监听
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动监听
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    init() {
      console.log('小番薯首页初始化');
      this.fetchData();
    },
    // 添加一个方法处理头像URL
    getAvatarUrl(avatar) {
      if (!avatar) {
        return 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
      }
      
      // 如果已经是完整URL，直接返回
      if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
        return avatar;
      }
      
      // 检查avatar是否以/开头
      if (!avatar.startsWith('/')) {
        avatar = '/' + avatar;
      }
      
      // 使用环境变量中的API基础URL
      const baseUrl = process.env.VUE_APP_BASE_API || 'http://localhost:8080';
      
      // 移除baseUrl末尾的斜杠(如果有)
      const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
      
      console.log('处理后的头像URL:', cleanBaseUrl + avatar);
      return cleanBaseUrl + avatar;
    },

    // 处理搜索
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.$message.warning('请输入搜索关键词');
        return;
      }

      this.$message.success(`搜索关键词: ${this.searchKeyword}`);
      this.resetList();
      this.searchArticles();
    },

    // 获取数据
    fetchData() {
      if (this.loading || this.noMore) return;

      this.loading = true;

      const params = {
        pageNum: this.currentPage, // 使用pageNum而不是page，根据后端API调整
        pageSize: this.pageSize,
        category: this.activeCategory !== 'recommend' ? this.activeCategory : undefined
      };

      console.log('请求参数:', params);

      getArticleList(params)
        .then(response => {
          // 检查响应格式
          console.log('API响应数据:', response);

          // 处理新的返回格式：{total: number, rows: array}
          let list = [];
          let total = 0;

          if (response && response.rows) {
            // 新格式
            list = response.rows;
            total = response.total || 0;
          } else if (Array.isArray(response)) {
            // 旧格式：直接返回数组
            list = response;
            total = list.length; // 使用数组长度作为总数
          } else if (response && response.data) {
            // 其他可能的格式
            if (Array.isArray(response.data)) {
              list = response.data;
              total = list.length;
            } else if (response.data.list) {
              list = response.data.list;
              total = response.data.total || list.length;
            } else if (response.data.rows) {
              list = response.data.rows;
              total = response.data.total || list.length;
            }
          }

          console.log(`获取到${list.length}条数据，总数${total}条`);

          if (list && list.length > 0) {
            // 格式化数据以匹配模板所需的结构
            const formattedList = list.map(item => {
              // 检查用户信息
              const authorInfo = item.author || {};
              
              // 获取头像URL
              const avatarUrl = authorInfo.avatar || item.authorAvatar;
              
              return {
                id: item.articleId || item.id || Math.random().toString(36).substr(2, 9),
                title: item.title || '无标题',
                coverImg: (item.imageList && item.imageList.length > 0) ? item.imageList[0] : 
                         'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                authorName: authorInfo.username || authorInfo.nickName || item.authorName || '用户' + Math.floor(Math.random() * 1000),
                authorAvatar: this.getAvatarUrl(avatarUrl), // 在这里处理头像URL
                likeCount: item.likeCount || '0',
                isVideo: item.isVideo || false
              };
            });

            console.log(`当前已显示${this.displayedNotes.length}条数据`);

            // 添加到显示列表
            this.displayedNotes = [...this.displayedNotes, ...formattedList];

            // 更新页码
            this.currentPage++;

            // 判断是否还有更多数据
            // 1. 如果当前显示的数据量已经达到或超过总数，则没有更多数据
            // 2. 如果返回的数据量小于请求的页大小，也表示没有更多数据
            if (this.displayedNotes.length >= total || list.length < this.pageSize) {
              this.noMore = true;
              console.log('已加载全部数据，总数:', total);
            }
          } else {
            this.noMore = true;
            console.log('没有更多数据');
          }

          this.loading = false;
        })
        .catch(error => {
          console.error('获取文章列表失败', error);
          this.$message.error('获取文章列表失败，请稍后重试');
          this.loading = false;

          // 开发环境下使用模拟数据
          if (process.env.NODE_ENV === 'development') {
            this.useMockData();
          }
        });
    },

    // 开发环境使用模拟数据
    useMockData() {
      // 模拟API响应
      setTimeout(() => {
        const mockData = this.generateMockData(this.pageSize);
        this.displayedNotes = [...this.displayedNotes, ...mockData];
        this.currentPage++;

        // 模拟数据最多100条
        if (this.displayedNotes.length >= 100) {
          this.noMore = true;
        }

        this.loading = false;
      }, 800);
    },

    // 生成模拟数据
    generateMockData(count) {
      const mockNotes = [
        {
          id: 1,
          title: '10w人看的吸猫小猫视频来啦！狠起来自己都咬',
          coverImg: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          authorName: '卡布家德文毛毛猫',
          authorAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          likeCount: '1.9万',
          isVideo: true
        },
        {
          id: 2,
          title: '王者荣耀里面有什么英雄是五个位置都能打的吗？',
          coverImg: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          authorName: '妙趣诗人',
          authorAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          likeCount: '87',
          isVideo: false
        },
        {
          id: 3,
          title: '谁能帮我把这个正常口口变成这样',
          coverImg: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          authorName: '没用的蛋卷',
          authorAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          likeCount: '2013',
          isVideo: true
        },
        {
          id: 4,
          title: '以前我记得都是叫复制，为什么慢慢地变成了复制？',
          coverImg: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          authorName: '起个什么名儿呢',
          authorAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          likeCount: '1233',
          isVideo: false
        },
        {
          id: 5,
          title: '有没有什么歌，把真人名字唱进了啊？',
          coverImg: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          authorName: 'momo',
          authorAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          likeCount: '1803',
          isVideo: false
        }
      ];

      const result = [];
      const baseIndex = this.displayedNotes.length;

      for (let i = 0; i < count; i++) {
        const baseNote = mockNotes[i % mockNotes.length];
        result.push({
          id: baseIndex + i + 1,
          title: `${baseNote.title} - ${baseIndex + i + 1}`,
          coverImg: baseNote.coverImg,
          authorName: baseNote.authorName,
          authorAvatar: baseNote.authorAvatar,
          likeCount: Math.floor(Math.random() * 1000) + '人赞过',
          isVideo: Math.random() > 0.5
        });
      }

      return result;
    },

    // 处理滚动事件
    handleScroll() {
      // 如果正在加载或已经没有更多数据，则不处理
      if (this.loading || this.noMore) return;

      // 计算滚动位置
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;

      // 当滚动到距离底部100px时加载更多
      if (scrollTop + windowHeight >= documentHeight - 100) {
        this.fetchData();
      }
    },

    // 重置列表
    resetList() {
      this.displayedNotes = [];
      this.currentPage = 1;
      this.noMore = false;
    },

    // 打开文章详情
    openArticleDetail(note) {
      // 阻止事件冒泡
      event.stopPropagation();
      
      // 显示加载中
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      // 获取文章详情
      getArticleDetail(note.id)
        .then(response => {
          loading.close();
          
          if (response && response.code === 200) {
            // 使用API返回的数据
            this.currentArticle = response.data;
            
            // 确保图片列表存在
            if (!this.currentArticle.imageList) {
              this.currentArticle.imageList = [this.currentArticle.coverImg];
            }
            
            // 设置互动数据
            this.likeCount = this.currentArticle.likeCount || 0;
            this.commentCount = this.currentArticle.commentCount || 0;
            this.isLiked = this.currentArticle.isLiked || false;
            this.isCollected = this.currentArticle.isCollected || false;
            this.isFollowing = this.currentArticle.isFollowing || false;
            
            // 获取评论列表
            this.comments = this.currentArticle.comments || [];
            
            // 显示弹窗
            this.detailVisible = true;
          } else {
            // 如果API调用失败，使用传入的note数据
            this.currentArticle = {
              ...note,
              content: '加载内容失败，请稍后重试',
              imageList: [note.coverImg],
              publishTime: new Date().toISOString()
            };
            
            this.likeCount = note.likeCount || 0;
            this.commentCount = 0;
            this.comments = [];
            this.detailVisible = true;
            
            this.$message.error('获取文章详情失败');
          }
        })
        .catch(error => {
          loading.close();
          console.error('获取文章详情失败', error);
          
          // 使用传入的note数据
          this.currentArticle = {
            ...note,
            content: '加载内容失败，请稍后重试',
            imageList: [note.coverImg],
            publishTime: new Date().toISOString()
          };
          
          this.likeCount = note.likeCount || 0;
          this.commentCount = 0;
          this.comments = [];
          this.detailVisible = true;
          
          this.$message.error('获取文章详情失败');
        });
    },
    
    // 关闭文章详情
    closeArticleDetail() {
      this.detailVisible = false;
      this.currentArticle = null;
      this.commentText = '';
      this.replyingTo = null;
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return '刚刚';
      
      const date = new Date(time);
      const now = new Date();
      const diff = now - date;
      
      // 小于1分钟
      if (diff < 60 * 1000) {
        return '刚刚';
      }
      
      // 小于1小时
      if (diff < 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 1000)) + '分钟前';
      }
      
      // 小于24小时
      if (diff < 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 60 * 1000)) + '小时前';
      }
      
      // 小于30天
      if (diff < 30 * 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (24 * 60 * 60 * 1000)) + '天前';
      }
      
      // 大于30天
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    },
    
    // 格式化内容，将换行符转换为<br>
    formatContent(content) {
      if (!content) return '';
      return content.replace(/\n/g, '<br>');
    },
    
    // 切换关注状态
    toggleFollow() {
      this.isFollowing = !this.isFollowing;
      // 这里可以添加关注/取消关注的API调用
      this.$message.success(this.isFollowing ? '已关注' : '已取消关注');
    },
    
    // 切换点赞状态
    toggleLike() {
      this.isLiked = !this.isLiked;
      this.likeCount = this.isLiked ? this.likeCount + 1 : this.likeCount - 1;
      // 这里可以添加点赞/取消点赞的API调用
    },
    
    // 切换收藏状态
    toggleCollect() {
      this.isCollected = !this.isCollected;
      // 这里可以添加收藏/取消收藏的API调用
      this.$message.success(this.isCollected ? '已收藏' : '已取消收藏');
    },
    
    // 分享
    handleShare() {
      this.$message.info('分享功能开发中');
    },
    
    // 聚焦评论输入框
    focusComment() {
      this.$nextTick(() => {
        this.$refs.commentInput.focus();
      });
    },
    
    // 回复评论
    replyComment(comment, parentComment) {
      this.replyingTo = {
        user: comment.username,
        commentId: parentComment ? parentComment.id : comment.id,
        replyId: parentComment ? comment.id : null
      };
      
      this.commentText = `@${comment.username} `;
      this.focusComment();
    },
    
    // 提交评论
    submitComment() {
      if (!this.commentText.trim()) return;
      
      // 这里可以添加提交评论的API调用
      const newComment = {
        id: Date.now(),
        username: this.$store.getters.name || '当前用户',
        avatar: this.getAvatarUrl(this.$store.getters.avatar) || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        content: this.commentText,
        createTime: new Date().toISOString(),
        replies: []
      };
      
      if (this.replyingTo) {
        // 回复评论
        const parentComment = this.comments.find(c => c.id === this.replyingTo.commentId);
        if (parentComment) {
          if (this.replyingTo.replyId) {
            // 回复的回复
            parentComment.replies.push({
              id: Date.now(),
              username: this.$store.getters.name || '当前用户',
              content: this.commentText.replace(`@${this.replyingTo.user} `, ''),
              createTime: new Date().toISOString(),
              replyTo: this.replyingTo.user
            });
          } else {
            // 回复评论
            parentComment.replies.push({
              id: Date.now(),
              username: this.$store.getters.name || '当前用户',
              content: this.commentText.replace(`@${this.replyingTo.user} `, ''),
              createTime: new Date().toISOString(),
              replyTo: this.replyingTo.user
            });
          }
        }
      } else {
        // 新评论
        this.comments.unshift(newComment);
        this.commentCount++;
      }
      
      this.commentText = '';
      this.replyingTo = null;
      this.$message.success('评论成功');
    },

    // 搜索文章
    searchArticles() {
      this.loading = true;

      const params = {
        pageNum: this.currentPage, // 使用pageNum而不是page
        pageSize: this.pageSize,
        category: this.activeCategory !== 'recommend' ? this.activeCategory : undefined
      };

      console.log('搜索请求参数:', params);

      searchArticles(this.searchKeyword, params)
        .then(response => {
          // 检查响应格式
          console.log('搜索API响应数据:', response);

          // 处理新的返回格式：{total: number, rows: array}
          let list = [];
          let total = 0;

          if (response && response.rows) {
            // 新格式
            list = response.rows;
            total = response.total || 0;
          } else if (Array.isArray(response)) {
            // 旧格式：直接返回数组
            list = response;
            total = list.length;
          } else if (response && response.data) {
            // 其他可能的格式
            if (Array.isArray(response.data)) {
              list = response.data;
              total = list.length;
            } else if (response.data.list) {
              list = response.data.list;
              total = response.data.total || list.length;
            } else if (response.data.rows) {
              list = response.data.rows;
              total = response.data.total || list.length;
            }
          }

          console.log(`搜索获取到${list.length}条数据，总数${total}条`);

          if (list && list.length > 0) {
            // 格式化数据以匹配模板所需的结构
            const formattedList = list.map(item => {
              // 检查用户信息
              const authorInfo = item.author || {};
              
              // 获取头像URL
              const avatarUrl = authorInfo.avatar || item.authorAvatar;
              
              return {
                id: item.articleId || item.id || Math.random().toString(36).substr(2, 9),
                title: item.title || '无标题',
                coverImg: (item.imageList && item.imageList.length > 0) ? item.imageList[0] : 
                         'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                authorName: authorInfo.username || authorInfo.nickName || item.authorName || '用户' + Math.floor(Math.random() * 1000),
                authorAvatar: this.getAvatarUrl(avatarUrl), // 在这里处理头像URL
                likeCount: item.likeCount || '0',
                isVideo: item.isVideo || false
              };
            });

            console.log(`当前已显示${this.displayedNotes.length}条搜索结果`);

            // 添加到显示列表
            this.displayedNotes = [...this.displayedNotes, ...formattedList];

            // 更新页码
            this.currentPage++;

            // 判断是否还有更多数据
            if (this.displayedNotes.length >= total || list.length < this.pageSize) {
              this.noMore = true;
              console.log('搜索结果已全部加载，总数:', total);
            }
          } else {
            this.noMore = true;
            console.log('没有更多搜索结果');
          }

          this.loading = false;
        })
        .catch(error => {
          console.error('搜索失败', error);
          this.$message.error('搜索失败，请稍后重试');
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.xiaohongshu-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 50px);
}

/* 分类导航 */
.category-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.category-items {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  flex: 1;
  margin-right: 10px;
}

.category-items::-webkit-scrollbar {
  display: none;
}

.category-item {
  padding: 5px 15px;
  margin-right: 10px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border-radius: 15px;
  transition: all 0.3s;
}

.category-item:hover {
  background-color: #f5f5f5;
}

.category-item.active {
  color: #ff2442;
  font-weight: bold;
}

/* 导航栏中的搜索框 */
.nav-search-container {
  width: 400px;
  flex-shrink: 0;
}

.nav-search-container .el-input__inner {
  border-radius: 20px;
}

.nav-search-container .el-input-group__append {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #ff2442;
  border-color: #ff2442;
  color: white;
}

/* 笔记瀑布流 */
.notes-waterfall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  padding: 10px 0;
}

.note-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s;
}

.note-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.note-cover {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
}

.note-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.note-card:hover .note-cover img {
  transform: scale(1.05);
}

.note-video-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.note-content {
  padding: 10px;
}

.note-title {
  font-size: 14px;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  margin-bottom: 10px;
  color: #333;
}

.note-author {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.author-name {
  margin-left: 5px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.like-count {
  margin-left: 5px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  color: #999;
}

.loading-container i {
  margin-right: 5px;
}

/* 没有更多内容 */
.no-more {
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .notes-waterfall {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .nav-search-container {
    width: 150px;
  }
}

@media screen and (max-width: 576px) {
  .notes-waterfall {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-search-container {
    width: 120px;
  }

  .category-nav {
    padding: 10px;
  }

  .category-item {
    padding: 5px 10px;
    margin-right: 5px;
    font-size: 12px;
  }
}

/* 文章弹窗样式 */
.article-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.article-popup-container {
  width: 920px;
  max-width: 95vw;
  max-height: 90vh;
  background-color: #fff;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  from { 
    opacity: 0; 
    transform: scale(0.95);
  }
  to { 
    opacity: 1; 
    transform: scale(1);
  }
}

.article-popup-close {
  display: none;
}

.article-popup-content {
  display: flex;
  height: 90vh;
  max-height: 700px;
  border-radius: 16px;
  overflow: hidden;
}

.article-popup-images {
  flex: 6;
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.article-popup-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-popup-info {
  flex: 5;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.article-popup-author {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.author-info {
  margin-left: 10px;
  flex: 1;
}

.author-name {
  font-weight: bold;
  font-size: 16px;
}

.publish-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.is-following {
  background-color: #f5f5f5;
  color: #666;
  border-color: #ddd;
}

.article-popup-main {
  margin-bottom: 20px;
}

.article-popup-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.4;
}

.article-popup-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.article-popup-location {
  font-size: 12px;
  color: #666;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.article-popup-location i {
  margin-right: 5px;
}

.article-popup-actions {
  display: none;
}

.article-popup-comments {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.comments-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 15px;
}

.comment-item {
  display: flex;
  margin-bottom: 15px;
}

.comment-content {
  margin-left: 10px;
  flex: 1;
}

.comment-user {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 5px;
}

.comment-info {
  display: flex;
  font-size: 12px;
  color: #999;
}

.comment-time {
  margin-right: 10px;
}

.comment-reply {
  cursor: pointer;
  color: #666;
}

.comment-reply:hover {
  color: #ff2442;
}

.reply-list {
  margin-top: 10px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 2px solid #f0f0f0;
}

.reply-item {
  margin-bottom: 10px;
}

.reply-content {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 5px;
}

.reply-user {
  font-weight: bold;
}

.reply-to {
  color: #ff2442;
}

.reply-info {
  display: flex;
  font-size: 12px;
  color: #999;
}

.reply-time {
  margin-right: 10px;
}

.reply-action {
  cursor: pointer;
  color: #666;
}

.reply-action:hover {
  color: #ff2442;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  color: #999;
}

.no-comments i {
  font-size: 40px;
  margin-bottom: 10px;
}

.comment-input {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.input-wrapper {
  display: flex;
  align-items: center;
}

.comment-input .el-input {
  flex: 1;
}

.comment-input .el-input /deep/ .el-input__inner {
  border-radius: 20px;
  background-color: #f5f5f5;
  border: none;
  height: 36px;
  padding-left: 15px;
}

.quick-actions {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.quick-action-item {
  display: flex;
  align-items: center;
  margin-left: 20px;
  cursor: pointer;
}

.quick-action-item i {
  font-size: 20px;
  color: #333;
  margin-right: 4px;
}

.quick-action-item span {
  font-size: 14px;
  color: #333;
}

.quick-action-item:hover i,
.quick-action-item:hover span {
  color: #ff2442;
}

.quick-action-item .liked {
  color: #ff2442 !important;
}

.quick-action-item .collected {
  color: #ff9c00 !important;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .article-popup-content {
    flex-direction: column;
    height: auto;
    max-height: 90vh;
  }
  
  .article-popup-images {
    height: 40vh;
  }
}

/* SVG心形图标样式 */
.heart-icon {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

.heart-icon.liked path {
  fill: #ff2442;
}

.heart-icon:hover path {
  fill: #ff2442;
}

.action-bar {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.action-bar span {
  display: flex;
  align-items: center;
  margin-left: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.action-bar i {
  font-size: 20px;
  margin-right: 4px;
}

.action-bar span:hover {
  color: #ff2442;
}

.liked {
  color: #ff2442 !important;
}

.collected {
  color: #ff9c00 !important;
}

/* 统一SVG图标样式 */
.icon-svg {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

.icon-svg.liked path {
  fill: #ff2442;
}

.icon-svg.collected path {
  fill: #ff9c00;
}

.icon-svg:hover path {
  fill: #ff2442;
}

.quick-action-item:hover .icon-svg:not(.liked):not(.collected) path {
  fill: #ff2442;
}

/* 调整评论和分享图标的大小 */
.icon-svg.comment-icon,
.icon-svg.share-icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

/* 调整爱心图标的大小 */
.icon-svg.heart-icon {
  width: 22px;
  height: 22px;
  margin-right: 4px;
}
</style>